<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Amber - Pet Care Bootstrap 5 Template</title>

		<!-- Favicons -->
		<link rel="shortcut icon" href="assets/images/favicon.ico">

		<link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
		<link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
		<link rel="stylesheet" href="assets/css/style.min.css">
		<link rel="stylesheet" href="assets/css/zpageNav.css" />

		<link rel="stylesheet" href="assets/css/element-ui.css" />
		
		<style>
		  .text {
			font-size: 14px;
		  }
		
		  .item {
			padding: 18px 0;
		  }
		
		  .box-card {
			  width: 868px;
		  }
		</style>
		<script src="assets/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
		<!-- 导航栏的JS-开始 -->
		var itemHost = "http://localhost:3001/itemservice"
		//文档就绪
		$(function(){
			getItemCat();
		})
		//获取二级分类菜单，循环遍历添加菜单
		function getItemCat(){
			$.ajax({
				type:"get",
				url: itemHost + "/itemCat/getAll",
				success: function(result){
					if(result.status == 200){
						//console.log(result.data)
						var itemCatList = result.data
						//遍历一级分类菜单
						for(var i in itemCatList){
							var itemCatOne = itemCatList[i]
							var itemCatOneChildren = itemCatOne.children
							//遍历二级分类菜单
							if(i==0){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#dog").append(
										`
											<li><a class="a" onclick="dogItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==1){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#cat").append(
										`
											<li><a class="a" onclick="catItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==2){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#other").append(
										`
											<li><a class="a" onclick="otherItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
						}
					}					
				}
			})
		}
		//点击狗狗分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function dogItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击猫咪分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function catItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击其他分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function otherItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击搜索框触发
		function searchItem(){
			let keyword = $("#search").val()
			$.ajax({
				type: "get",
				url: itemHost+"/item/search",
				data: {
					keyword:keyword
				},
				success: function(result){
					if(result.status==200){
						window.location.href = "shop.html"
					}
				}
			})
		}
		//退出登录
		function logout(){
			if(localStorage.getItem("accessToken") == null){
				alert("您还没有登录")
			}else{
				localStorage.removeItem("accessToken")
				localStorage.removeItem("refreshToken")
				sessionStorage.removeItem("userName")
				window.location.href = "index.html"
			}
		}
		/* 登录认证，如果没有登录，就不会跳转到account.html页面 */
		function accountAuth(){
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
			}else{
				window.location.href = "account.html"
			}
		}
		/* 登录认证，如果没有登录，就不会跳转到cart.html页面 */
		function cartAuth(){
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
			}else{
				window.location.href = "cart.html"
			}
		}
		<!-- 导航栏的JS-结束 -->
		</script>
	</head>

	<body>
	<!-- Header Section Start -->
	<div class="header section">
	
	    <!-- Header Top Start -->
	    <div class="header-top bg-name-primary">
	        <div class="container">
	            <div class="row align-items-center">
	
					<!-- Header Top Message Start -->
					<div class="col-12 col-lg-6">
					    <div class="header-top-msg-wrapper">
					        <a href="index.html" class="header-top-message">欢迎来到萌宠奇遇!</a>
					    </div>
					</div>
					<div class="col-12 col-lg-6">
					    <div class="header-top-settings">
							<a onclick="logout()" style="font-size: small; float: right; color: white;"> 退出登录 </a>
					        <a href="register.html" style="font-size: small; float: right; color: white;"> 注册&nbsp;&nbsp;|&nbsp;&nbsp; </a>
					        <a href="login.html" style="font-size: small; float: right; color: white;"> 登录&nbsp;&nbsp;|&nbsp;&nbsp;</a>
					    </div>
					</div>
					<!-- Header Top Message End -->
	
	            </div>
	        </div>
	    </div>
	    <!-- Header Top End -->
	
	    <!-- Header Bottom Start -->
	    <div class="header-bottom">
	        <div class="header-sticky">
	            <div class="container">
	                <div class="row align-items-center position-relative">
	
	                    <!-- Header Logo Start -->
	                    <div class="col-lg-3 col-md-4 col-6">
	                        <div class="header-logo">
	                            <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
	                        </div>
	                    </div>
	                    <!-- Header Logo End -->
	
	                    <!-- Header Menu Start -->
	                    <div class="col-lg-6 d-none d-lg-block">
	                        <div class="main-menu">
	                            <ul>
	                                <li class="has-children">
	                                    <a href="index.html">首页</a>
	                                </li>
	                                <li class="has-children position-static">
	                                     <a href="#">萌宠商城</a>
	                                    <ul class="mega-menu" id="itemCat">
	                                        <li class="mega-menu-col">
	                                            <h4 class="mega-menu-title">狗狗</h4>
	                                            <ul class="m-b-n10" id="dog">
	                                                
	                                            </ul>
	                                        </li>
	                                        <li class="mega-menu-col">
	                                            <h4 class="mega-menu-title">猫咪</h4>
	                                            <ul class="m-b-n10" id="cat">
	                                               
	                                            </ul>
	                                        </li>
	                                        <li class="mega-menu-col">
	                                            <h4 class="mega-menu-title">其他</h4>
	                                            <ul class="m-b-n10" id="other">
	                                               
	                                            </ul>
	                                        </li>
	                                        <li class="mega-menu-col">
	                                            <div class="megamenu-image">
	                                                <a href="shop.html">
	                                                    <img class="fit-image" src="assets/images/header/mega-menu.png" alt="Megamenu Image">
	                                                </a>
	                                            </div>
	                                        </li>
	                                    </ul>
	                                </li>
	                                <li class="has-children">
	                                    <a href="forum.html">萌宠论坛</a>
	                                </li>
	                                <li class="has-children">
	                                    <a href="diary.html">萌宠日记</a>
	                                </li>
	                                <li><a href="login.html">登录</a></li>
	                                <li><a href="register.html">注册</a></li>
	                            </ul>
	                        </div>
	                    </div>
	                    <!-- Header Menu End -->
	
	                    <!-- Header Action Start -->
	                    <div class="col-lg-3 col-md-8 col-6">
	                        <div class="header-actions">
	
	                            <!-- Header Action Search Button Start -->
	                            <div class="header-action-btn header-action-btn-search d-none d-md-flex">
	                                <div class="action-execute">
	                                    <a class="action-search-open" href="javascript:void(0)"><i class="icon-magnifier icons"></i></a>
	                                    <a class="action-search-close" href="javascript:void(0)"><i class="ti-close"></i></a>
	                                </div>
	                                <!-- Search Form and Button Start -->
	                                <form class="header-search-form" >
	                                    <input type="text" class="header-search-input" placeholder="搜索商品" value="" id="search">
	                                    <button class="header-search-button" onclick="searchItem()"><i class="icon-magnifier icons"></i></button>
	                                </form>
	                                <!-- Search Form and Button End -->
	                            </div>
	                            <!-- Header Action Search Button End -->
	
	                            <!-- Header My Account Button Start -->
	                            <a onclick="accountAuth()" class="header-action-btn header-action-btn-wishlist"">
	                                <i class="icon-user icons"></i>
	                            </a>
	                            <!-- Header My Account Button End -->
	
	                            <!-- Header Action Button Start -->
	                            <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
	                                <a onclick="cartAuth()" class="cart-visible">
	                                    <i class="icon-handbag icons"><span style="font-size: medium;">&nbsp;购物车</span></i>
	                                </a>
	                            </div>
	                            <!-- Header Action Button End -->
	                        </div>
	                    </div>
	                    <!-- Header Action End -->
	
	                </div>
	            </div>
	        </div>
	    </div>
	    <!-- Header Bottom End -->
	
	</div>
	<!-- Header Section End -->
	

		<!-- Breadcrumb Area Start -->
		<div class="section breadcrumb-area bg-name-bright">
			<div class="container">
				<div class="row">
					<div class="col-12 text-center">
						<div class="breadcrumb-wrapper">
							<h2 class="breadcrumb-title">萌宠论坛</h2>
							<ul>
								<li><a href="index.html">主页</a></li>
								<li>萌宠论坛</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Breadcrumb Area End -->
<!--日志-->
		<!-- Shop Section Start -->
		<div class="section section-margin">
			<div class="container">
				<div class="row flex-row-reverse" id="app">
					<div class="col-lg-9 col-12">
<!-- 话题概要开始 -->
						<div>
							<div class="col m-b-40" v-for="topic in topicList">
								<!-- Single Blog Start -->
								<div class="single-blog-wrapper">

									<!-- Blog Thumb Start -->
									<!-- <div class="blog-thumb thumb-effect">
							            <a class="image" href="forum-details.html">
							                <img class="fit-image" src="assets/images/blog/medium-size/1.jpg" alt="Blog Image">
							            </a>
							        </div> -->
									<!-- Blog Thumb End -->


									<el-card class="box-card">
									  <div>
									    <!-- Blog Content Start -->
										<div class="blog-content" >
											<h2 class="blog-title"><a href="#" @click="convertToComment(topic.id)"
													v-text="$options.filters.ellipsis1(topic.title)"></a></h2>
											<p v-text="$options.filters.ellipsis2(topic.descriptions)">
											</p>
											<div class="blog-meta">
												<ul>
													<li><span>By</span><a href="#/" v-text="topic.username"></a></li>
													<span style="font-family: '微软雅黑';" v-text="$options.filters.formatDate(topic.created)"></span>&nbsp;
													- &nbsp;<b><span v-text="topic.count"></span></b> &nbsp;回复
												</ul>
												<span style="float:right;"><a class="more-link" @click="convertToComment(topic.id)">查看详情</a></span>
											</div>
											
										</div>
										<!-- Blog Content End -->
									  </div>
									</el-card>

									
								</div>
								<!-- Single Blog End -->
							</div>
						</div>
<!-- 话题概要结束 -->
<!--日志-->
						<div class="row">
							<div class="col-12 m-t-50">
								<nav class="d-flex justify-content-center">
									<zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total"
										v-bind:max-page="maxPage" v-on:pagehandler="pageHandler">
									</zpagenav>
								</nav>
							</div>
						</div>

					</div>
<!--侧边栏-->
					<div class="col-lg-3 col-12">
						<!-- Sidebar Widget Start -->
<!--搜索框开始-->
						<aside class="sidebar_widget m-t-50 mt-lg-0">
							<div class="widget_inner">
								<div class="widget-list m-b-50">
									<h3 class="widget-title m-b-30">搜索&nbsp;</h3>
									<div class="search-box">
										<input type="text" class="form-control" placeholder="搜索内容"
											aria-label="Search Our Store" v-model="query">
										<button class="search-icon" type="button" @click="pageHandler(1)">
											<i class="icon-magnifier"></i>
										</button>
									</div>
								</div>
<!--搜索框结束-->
<!--功能模块, 发布话题开始-->
								<div class="widget-list m-b-50">
									<h3 class="widget-title m-b-30">功能模块</h3>
									<div class="sidebar-body">
										<!-- Form -->
										<el-button type="text" @click="addTopicBtn">发布话题
										</el-button>

										<el-dialog title="发布话题" :visible.sync="dialogFormVisible">
											<el-form :rules="rules" :model="topicForm" ref="addTopicRef">
												<el-form-item label="话题名称" prop="title" :label-width="formLabelWidth">
													<el-input
													  type="text"
													  placeholder="请输入标题"
													  maxlength="50"
													  v-model="topicForm.title">
													</el-input>
												</el-form-item>
												<el-form-item label="话题内容" prop="descriptions" :label-width="formLabelWidth">
													<el-input
													  type="textarea"
													  placeholder="请输入内容"
													  v-model="topicForm.descriptions"
													  :rows="10"
													  maxlength="1000"
													  show-word-limit>
													</el-input>
												</el-form-item>
											</el-form>
											<div slot="footer" class="dialog-footer">
												<el-button @click="dialogFormVisible = false">取 消</el-button>
												<el-button type="primary" @click=addTopic>发 布
												</el-button>
											</div>
										</el-dialog>
									</div>
								</div>

<!--功能模块, 发布话题结束-->
<!--热门话题开始, 根据阅读量排序, 显示前三-->
								<div class="widget-list p-b-50">
									<h3 class="widget-title m-b-30">热门话题</h3>
									<div class="sidebar-body blog-list-wrapper m-b-n30">

										<!-- Single Blog List Start -->
										<div class="single-blog-list m-b-30" v-for="hotTopic in hotTopicList">
											<!-- Blog List Content Start -->
											<el-card class="box-card">
												<div class="blog-list-content">
													<h6 class="blog-name">
														<a  href="#"
															v-text="hotTopic.title"
															@click="convertToComment(hotTopic.id)">
															How to take care...
														</a>
													</h6>
													<div class="blog-meta">
														<p v-text="$options.filters.formatDate(hotTopic.created)">03/11/2021</p>
													</div>
												</div>
											<!-- Blog List Content End -->
											</el-card>
										</div>
										<!-- Single Blog List End -->

									</div>
								</div>
<!--热门话题结束, 根据阅读量排序, 显示前三-->
							</div>
						</aside>
						<!-- Sidebar Widget End -->
					</div>
				</div>
			</div>
		</div>
		<!-- Shop Section End -->
		<!--侧边栏-->

		<!-- Blog Grid Section End -->

		<!-- Footer Section Start -->
		<footer class="section footer-section">
			<!-- Footer Top Start -->
			<div class="footer-top bg-name-bright section-padding">
				<div class="container">
					<div class="row m-b-n40">
						<div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1000">
							<div class="single-footer-widget">
								<h1 class="widget-title">关于我们</h1>
								<p class="desc-content">然后疼痛就会停止，疼痛就会受到折磨。</p>
								<!-- Soclial Link Start -->
								<div class="widget-social justify-content-start m-b-n10">
									<a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
									<a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
									<a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
									<a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
									<a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
								</div>
								<!-- Social Link End -->
							</div>
						</div>
						<div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1200">
							<div class="single-footer-widget">
								<h2 class="widget-title">有用的链接</h2>
								<ul class="widget-list">
									<li><a href="wishlist.html">帮助和联系我们</a></li>
									<li><a href="contact.html">退货和退款</a></li>
									<li><a href="contact.html">线上商店</a></li>
									<li><a href="contact.html">条款与条件</a></li>
								</ul>
							</div>
						</div>
						<div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1400">
							<div class="single-footer-widget">
								<h2 class="widget-title">帮助</h2>
								<ul class="widget-list">
									<li><a href="wishlist.html">愿望清单</a></li>
									<li><a href="contact.html">定价计划</a></li>
									<li><a href="contact.html">物流跟踪</a></li>
									<li><a href="contact.html">退换商品</a></li>
								</ul>
							</div>
						</div>
						<div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1600">
							<div class="single-footer-widget">
								<h2 class="widget-title">发送时事通讯</h2>
								<div class="widget-body">
									<p class="desc-content m-b-20">订阅我们的时事通讯，首次购买可享受10%的折扣。</p>
									<!-- Newsletter Form Start -->
									<div class="newsletter-form-wrap p-t-5">
										<form id="mc-form" class="mc-form">
											<input type="email" id="mc-email" class="form-control email-box"
												placeholder="demo@example.com" name="EMAIL">
											<button id="mc-submit" class="newsletter-btn" type="submit">发送</button>
										</form>
										<!-- mailchimp-alerts Start -->
										<div class="mailchimp-alerts text-centre">
											<div class="mailchimp-submitting"></div>
											<!-- mailchimp-submitting end -->
											<div class="mailchimp-success text-success"></div>
											<!-- mailchimp-success end -->
											<div class="mailchimp-error text-danger"></div>
											<!-- mailchimp-error end -->
										</div>
										<!-- mailchimp-alerts end -->
									</div>
									<!-- Newsletter Form End -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Footer Top End -->
		</footer>
		<!-- Footer Section End -->

		<script src="assets/js/vendor.min.js"></script>
		<script src="assets/js/plugins.min.js"></script>

		<!--Main JS-->
		<script src="assets/js/main.js"></script>

		<!-- 页面传参 -->
		<script src="static/jquery.params.js"></script>
		<!-- vue-->
		<script src="static/vue.js"></script>
		<script src="static/element-ui.js"></script>
		<!-- 分页js -->
		<script src="static/zpageNav.js"></script>
		<!-- axios -->
		<script src="static/axios.min.js"></script>
		<script>
			var forumHost = "http://localhost:3001/forumservice"
			let app = new Vue({
				el: "#app",
				data() {
					return {
						query: '', //定义查询参数
						page: 1, //显示的是哪一页
						pageSize: 4, //每一页显示的数据条数
						total: 0, //记录总数
						maxPage: 7, //最大页数

						topicList: [],
						hotTopicList: [],
						dialogTableVisible: false,
						dialogFormVisible: false,
						topicForm: {
							title: '',
							descriptions: '',
							username: '',
						},
						formLabelWidth: '120px',
						rules: {
						  title: [
						          { required: true, message: '请输入标题', trigger: 'blur' },
						          { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
						        ],
						  descriptions: [
						          { required: true, message: '请输入正文内容', trigger: 'blur' },
						          { min: 10, max: 1000, message: '长度在 10 到 1000 个字符', trigger: 'blur' }
						        ]
						}
					};
				},
				// 设置过滤器, 后端传值时, 经过滤器处理后,显示到页面
				filters: {
					//标题超过33位显示 ...
					ellipsis1: function(value) {
					  if (!value) return "";
					  if (value.length > 33) {
						return value.slice(0, 33) + "...";
					  }
					  return value;
					},
					//正文超过110位显示 ...
					ellipsis2: function(value) {
					  if (!value) return "";
					  if (value.length > 109) {
						return value.slice(0, 109) + "...";
					  }
					  return value;
					},
					formatDate: function(dateStr){
						//得到特定的时间
						var date = new Date(dateStr);
						var year = date.getFullYear();
						//ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
						var month = date.getMonth()+1<10 ? '0'+ (date.getMonth()+1) : date.getMonth()+1;
						var day = date.getDate()<10 ? '0' + date.getDate() : date.getDate();
						var hh = date.getHours()<10 ? '0' + date.getHours() : date.getHours();
						var mm = date.getMinutes()<10 ? '0' + date.getMinutes() : date.getMinutes();
						var ss = date.getSeconds()<10 ? '0' + date.getSeconds() : date.getSeconds();

						return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
					}
				},
				methods: {
					async pageHandler(page) {
						// 页面跳转时, 初始化用户名
						// 获取用户名
						this.getUserName()
						this.page = page;
						// debugger
						let queryItemInfo = {
							"query": this.query,
							"pageNum": this.page,
							"pageSize": this.pageSize,
						}
						let {
							data: result
						} = await axios.get(forumHost + "/forum/topic/findAllTopicList", {
							params: queryItemInfo
						})
						if (result.status == 200) {
							console.log(result.msg)
							this.topicList = result.data.rows
							this.total = result.data.total
						} else {
							console.log(result.msg)
						}
					},
					convertToComment(id) {
						window.location.href = `./forum-details.html?id=${id}`
					},
					// 验证用户在发布话提前是否登录
					addTopicBtn(){
						if (this.topicForm.username === null || this.topicForm.username === ""){
							alert("请先登录")
							location.href="login.html"
						}
						else{
							this.dialogFormVisible = true
						}
					},
					// 登录成功, 发布话题
					async addTopic() {
							// debugger
						this.$refs.addTopicRef.validate(async valid => {
							//如果校验失败 则停止数据
							if(!valid) return
							let {
								data: result
							} = await axios.post(forumHost + "/forum/topic/addTopic", this.topicForm)
							if (result.status == 200) {
								alert("添加成功")
								this.topicForm.title = ''
								this.topicForm.descriptions = ''
								this.dialogFormVisible = false
								this.pageHandler(1)
							} else {
								console.log(result.msg)
							}
						})
					},
					async findHotTopicList() {
						// debugger
						let {
							data: result
						} = await axios.get(forumHost + "/forum/topic/findHotTopicList")
						if (result.status == 200) {
							console.log(result.msg)
							this.hotTopicList = result.data
						} else {
							console.log(result.msg)
						}
					},
					// 获取当前登录的用户名
					getUserName() {
						this.topicForm.username = sessionStorage.getItem("userName")
					}
				},
				mounted() {
					this.pageHandler(1)
					this.findHotTopicList()
				}
			})
		</script>
	</body>

</html>
